<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <meta
            name="viewport"
            content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <title>{% block title %}{% endblock %} | timeFlies</title>
    <link rel="stylesheet" href="/static/front/css/bootstrap.css"/>
    <link rel="stylesheet" href="/static/front/css/main.css"/>
    <link rel="stylesheet" href="/static/front/css/animate.css"/>
    <link rel="stylesheet" href="/static/front/font/iconfont.css"/>
    {% block header %}

    {% endblock %}
</head>
<body>
<!--导航-->
<nav
        class="navbar navbar-expand-lg navbar-light nav-color-nav navbar-lk text-dark"
>
    <div class="container">
        <a class="navbar-brand darknight" href="#"
        ><img src="/static/front/images/logo3.png" alt=""
        /></a>
        <button
                class="navbar-toggler"
                type="button"
                data-toggle="collapse"
                data-target="#nabmune"
                aria-controls="nabmune"
                aria-expanded="false"
                aria-label="Toggle navigation"
        >
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse justify-content-end" id="nabmune">
            <ul class="navbar-nav nav-color">
                <li class="nav-item">
                    <a class="nav-link" href="{% url 'front:index' %}">首页</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="{% url 'front:category' %}">文章</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="{% url 'front:mood' %}">随说</a>
                </li>
{#                <li class="nav-item">#}
{#                    <a class="nav-link" href="#">相册</a>#}
{#                </li>#}
            </ul>
        </div>
    </div>
</nav>

<!--内容-->
<div class="container mt-2">
    <div class="row">
        <div class="col-md-8">
            <div class="container">
                {% block main %}

                {% endblock %}
            </div>
        </div>

        <!--右边-->
        <div class="col-md-4">
            <div class="container">
                <!-- search -->
                <div class="row bgc mt-2">
                    <form class="search" action="{% url 'front:search' %}">
                        <input type="text" class="search-input" name="kw" placeholder="search"/>
                        <button class="search-submit" type="submit">
                            <i class="iconfont icon-search"></i>
                        </button>
                    </form>
                </div>
                <!-- 随说 -->
                <div class="row bgc mt-2">
                    <div class="new new-right">
                        <span><i class="iconfont icon-listen"></i>随说</span>
                        <small>New Article</small>
                    </div>
                    <div class="col-md-12">
                        <div
                                class="tab-pane"
                                role="tabpanel"
                                aria-labelledby="nav-profile-tab"
                        >
                            <ul class="art-sort">
                                {% for talk in talks %}
                                    <li>
                                        <span>{{ forloop.counter }}</span>
                                        <a href="{% url 'front:talk' id=talk.id %}">{{ talk.content }} </a>
                                        <b>({{ talk.mood.name }})</b>
                                    </li>
                                {% endfor %}
                            </ul>
                        </div>
                    </div>
                </div>
                <!-- 最爱 -->
                <div class="row bgc mt-2">
                    <div class="new new-right">
                        <span><i class="iconfont icon-recommend"></i>最爱</span>
                        <small>Like Article</small>
                    </div>
                    <ul class="list-unstyled artimg-list">
                        {% for post in like_posts %}
                            <li class="media">
                                <div class="artimg-img">
                                    <img
                                            class="mr-3"
                                            src="{{ post.thumbnail }}"
                                            alt="未找到图片~~"
                                    />
                                </div>
                                <div class="media-body art-content">
                                    <h5 class="mt-0 mb-1"><a href="{% url 'front:detail' pid=post.pid %}">{{ post.title }}</a></h5>
                                    <p>{{ post.desc }}</p>
                                    <ul>
                                        <li>
                                            <a title="{{ post.author.username }}{{ post.pub_time|date:"Y-m-d" }}发表"
                                            ><i class="iconfont icon-time"></i>{{ post.pub_time|date:"Y-m-d" }}</a
                                            >
                                        </li>
                                        <li class="d-none d-sm-none d-md-none d-lg-block">
                                            <a href="#"
                                            ><i class="iconfont icon-fire"></i>{{ post.like }}</a
                                            >
                                        </li>
                                    </ul>
                                </div>
                            </li>
                        {% endfor %}

                    </ul>
                </div>
                <!-- 推荐 -->
                <div class="row bgc mt-2">
                    <div class="new new-right">
                        <span><i class="iconfont icon-recommend"></i>推荐</span>
                        <small>Recommend Article</small>
                    </div>
                    <ul class="list-unstyled artimg-list">
                        {% for post in recom_posts %}
                            <li class="media">
                                <div class="artimg-img">
                                    <img
                                            class="mr-3"
                                            src="{{ post.thumbnail }}"
                                            alt="未找到图片~~"
                                    />
                                </div>
                                <div class="media-body art-content">
                                    <h5 class="mt-0 mb-1"><a href="{% url 'front:detail' pid=post.pid %}">{{ post.title }}</a></h5>
                                    <p>{{ post.desc }}</p>
                                    <ul>
                                        <li>
                                            <a title="{{ post.author.username }}{{ post.pub_time|date:"Y-m-d" }}发表"
                                            ><i class="iconfont icon-time"></i>{{ post.pub_time|date:"Y-m-d" }}</a
                                            >
                                        </li>
                                        <li class="d-none d-sm-none d-md-none d-lg-block">
                                            <a href="#"
                                            ><i class="iconfont icon-fire"></i>{{ post.like }}</a>
                                        </li>
                                    </ul>
                                </div>
                            </li>
                        {% endfor %}

                    </ul>
                </div>
                <!-- 标签云 -->
                <div class="row bgc mt-2">
                    <div class="new new-right">
                        <span><i class="iconfont icon-tags"></i>标签云</span>
                        <small>Tags</small>
                    </div>
                    <div class="col-md-12">
                        <ul class="label">
                            {% for tag in tags %}
                                <li>
                                    <a href="#"
                                       title="{{ tag.name }}">{{ tag.name }}&nbsp;&nbsp;({{ tag.post_num }})</a>
                                </li>
                            {% endfor %}

                        </ul>
                    </div>
                </div>
                <!-- 友情连接 -->
                <div class="row bgc mt-2">
                    <div class="new new-right">
                        <span><i class="iconfont icon-link"></i>友情连接</span>
                        <small>Friend Links</small>
                    </div>
                    <div class="col-md-12">
                        <ul class="links">
                            {% for friend in friends %}
                                <li>
                                    <a href="{{ friend.link_to }}" target="_blank">{{ friend.title }}</a>
                                </li>
                            {% endfor %}

                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!--底部-->
<footer id="footer">
    <div class="foot-nav text-center">
        <div class="copy-right"><span>Copyright © xxxxxxxx 2020 </span></div>
        <div class="bottom-nav">
            <span>ICP备xxxx号 </span>
        </div>
    </div>
</footer>

{% block utils %}

{% endblock %}

<script src="/static/front/js/jquery.js"></script>

<script src="/static/front/js/bootstrap.js"></script>
<script src="/static/front/js/wow.js"></script>
<script src="/static/front/js/jquery.ajax.js"></script>
<script src="/static/front/js/template-web.js"></script>
<script>
    //wow初始化
    new WOW().init();
    // art-template filter
    template.defaults.imports.timeSince = function (dateValue) {
        var date = new Date(dateValue);
        var datets = date.getTime(); // 得到的是毫秒的
        var nowts = (new Date()).getTime(); //得到的是当前时间的时间戳
        var timestamp = (nowts - datets) / 1000; // 除以1000，得到的是秒
        if (timestamp < 60) {
            return '刚刚';
        } else if (timestamp >= 60 && timestamp < 60 * 60) {
            minutes = parseInt(timestamp / 60);
            return minutes + '分钟前';
        } else if (timestamp >= 60 * 60 && timestamp < 60 * 60 * 24) {
            hours = parseInt(timestamp / 60 / 60);
            return hours + '小时前';
        } else if (timestamp >= 60 * 60 * 24 && timestamp < 60 * 60 * 24 * 30) {
            days = parseInt(timestamp / 60 / 60 / 24);
            return days + '天前';
        } else {
            var year = date.getFullYear();
            var month = date.getMonth();
            var day = date.getDay();
            var hour = date.getHours();
            var minute = date.getMinutes();
            return year + '/' + month + '/' + day + " " + hour + ":" + minute;
        }
    }
</script>
{% block footer %}

{% endblock %}
</body>
</html>
